<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <h3>这是父组件</h3>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody style="color: red">
                <tr>
                    <td>{{fatherData.name}}</td>
                    <td>{{fatherData.age}}</td>
                </tr>
            </tbody>
        </table>

        <hr>
        <!-- 注意这里使用驼峰命名的时候，方法调用时会报错，原因是html属性不区分大小写。
            在一个内置的templates时，不能使用v-on监听驼峰事件。
        vue-2.4.0.js:471 [Vue tip]: Event "sonshow" is emitted in component <Com1> but the handler is registered for "sonShow". 
            Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. 
            You should probably use "son-show" instead of "sonShow".
        -->
        <com1 @son-show ="fatherShow"></com1>
    </div>
    <template id="temp">
        <div>
            <h3>这是子组件</h3>
            <label for="">姓名</label>
            <input type="text" v-model="name">
            <label for="">年龄</label>
            <input type="text" v-model="age" @keyup.enter="send()">
        </div>
    </template>

    <script>
        // 子组件调用父组件方法，来给父组件传值
        var vm = new Vue({
            el: "#app",
            data: {
                fatherData: {}
            },
            methods: {
                // 父组件接收子组件传递的值
                fatherShow(sonData) {
                    this.fatherData = sonData
                }
            },
            components: {
                com1: {
                    template: "#temp",
                    // 子组件的私有值
                    data: function () {
                        return {
                            name: "",
                            age: ""
                        }
                    },
                    methods: {
                        // 子组件调用send()---通过sonshow---调用fatherShow
                        send() {
                            var person = { name: this.name, age: this.age }
                            this.$emit('son-show',person)
                        }
                    }
                }
            }

        })
    </script>

</body>

</html>